【JavaScript】イベントのプログラム発生 - Eventオブジェクト生成とdispatchEventメソッド

JavaScriptでブラウザイベントをプログラムで発生させる方法について解説します。

検証環境

JavaScript -

macOS

14.1

イベントのプログラム発生

イベントをプログラムで発生させることができます。

手順は次の通りです。

Eventオブジェクトの生成
イベントの発生

それぞれについて以下に解説します。

Eventオブジェクトの生成

Eventオブジェクトを生成します。

基本構文

new Event(イベント種別)

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

<button id="btn">確認</button>
<pre id="log"></pre>
<button id="rst">リセット</button>


<script type="text/javascript">
    
    function logger( text ) {
        let log = document.getElementById('log');
        log.textContent += text +  "\n";
    }
    
    function reset( event ) {
        let log = document.getElementById('log');
        log.textContent = "";
    }
    
    let rst = document.getElementById('rst');
    rst.addEventListener('click', reset);
    
    let btn = document.getElementById('btn');
    btn.addEventListener('click', function( event ) {
        logger("Button Event.");
    });
    
    ___ih_hl_start
    let e = new Event('click');
    ___ih_hl_end
</script>

プレビュー

３３行目がEventオブジェクトの生成です。

イベント種別'click'はクリックイベントを表します。

イベントの発生

イベントの発生は要素（オブジェクト）のdispatchEventメソッドにEventオブジェクトを引数で与えます。

基本構文

要素オブジェクト.dispatchEvent(Eventオブジェクト)

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

<button id="btn">確認</button>
<pre id="log"></pre>
<button id="rst">リセット</button>


<script type="text/javascript">
    
    function logger( text ) {
        let log = document.getElementById('log');
        log.textContent += text +  "\n";
    }
    
    function reset( event ) {
        let log = document.getElementById('log');
        log.textContent = "";
    }
    
    let rst = document.getElementById('rst');
    rst.addEventListener('click', reset);
    
    let btn = document.getElementById('btn');
    btn.addEventListener('click', function( event ) {
        logger("Button Event.");
    });
    
    let e = new Event('click');
    ___ih_diff_start
+    btn.dispatchEvent(e);
    ___ih_diff_end
</script>

プレビュー

３４行目がイベントの発生です。

生成したEventオブジェクトをdispatchEventメソッドの呼び出し時に与えています。

プレビューの確認ボタンをクリックしなくても、Button Event.を表示していることから、２９〜３１行目のクリックイベントが実行されたことが分かります。